<template>
  <div class="app-container">
    <div class="head-container">
      <!--query form-->
      <el-form ref="tableRequestForm" :rules="tableRequestRule" :inline="true" :model="tableRequest" class="demo-form-inline">
        <el-form-item label="url" prop="url">
          <el-input v-model="tableRequest.url" placeholder="<host>:<port>/<dbName>" style="width:200px" size="mini" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="tableRequest.username" placeholder="请输入数据库用户名" size="mini" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="tableRequest.password" type="password" placeholder="请输入数据库密码" size="mini" />
        </el-form-item>
        <el-form-item label="表名" prop="tableName">
          <el-input v-model="tableRequest.tableName" placeholder="请输入数据库表名" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" size="mini" @click="handleQueryTable">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--table render-->
    <div style="margin-top: 15px;">
      <el-table
        :data="tables"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          type="index"
          width="50"
        />
        <el-table-column label="表名" align="left" min-width="100%">
          <template slot-scope="{row}">
            <span>{{ row.tableName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="注释" align="left">
          <template slot-scope="{row}">
            <span>{{ row.tableComment }}</span>
          </template>
        </el-table-column>

        <el-table-column label="引擎" align="left">
          <template slot-scope="{row}">
            <span>{{ row.engine }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="left">
          <template slot-scope="{row}">
            <span>{{ parseTime(Date.parse(row.createTime.substring(0, row.createTime.indexOf(".")))) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-setting" size="mini" @click="showGeneratorConfig(row)"> 生成代码 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页组件-->
      <div align="rigth" style="margin-top: 8px;">
        <el-pagination
          :total="total"
          :page-size="tableRequest.pageSize"
          :current-page="tableRequest.pageNum"
          layout="total, prev, pager, next, sizes"
          background
          style="margin-top: 8px;"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!--generator config dialog-->
    <el-dialog title="生成配置" :visible.sync="genConfigDialogVisible" width="600px">
      <el-form ref="genConfigForm" :rules="genConfigRules" :model="genConfig" label-position="left" label-width="120px" style="width: 430px; margin-left:50px;">
        <el-form-item label="表名" prop="tableName">
          <el-input v-model="genConfig.tableName" disabled />
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="genConfig.author" placeholder="tom" />
        </el-form-item>
        <el-form-item label="包名" prop="packageName">
          <el-input v-model="genConfig.packageName" placeholder="com.study" />
        </el-form-item>
        <el-form-item label="模块名" prop="moduleName">
          <el-input v-model="genConfig.moduleName" placeholder="example" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="genConfigDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" icon="el-icon-download" @click="handGenerateCode()">
          生成代码
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import store from '@/store'
import { parseTime, downloadFile } from '@/utils/index'
import { listTables, generatorCode } from '@/api/dev-tool/code-generate'

export default {
  data() {
    return {
      total: 0,
      tableRequest: {
        pageNum: 1,
        pageSize: 10,
        tableName: '',
        url: store.getters.dbConnectionProperty.url,
        username: store.getters.dbConnectionProperty.username,
        password: ''
      },
      tableRequestRule: {
        url: [
          { required: true, message: 'JDBC连接串不能为空', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      tables: [],
      genConfigDialogVisible: false,
      genConfig: {
        author: store.getters.genConfig.author,
        packageName: store.getters.genConfig.packageName,
        moduleName: store.getters.genConfig.moduleName,
        tableName: store.getters.genConfig.tableName
      },
      genConfigRules: {
        author: [
          { required: true, message: 'author不能为空', trigger: 'blur' }
        ],
        packageName: [
          { required: true, message: '包名不能为空', trigger: 'blur' }
        ],
        moduleName: [
          { required: true, message: '模块名不能为空', trigger: 'blur' }
        ],
        tableName: [
          { required: true, message: '表名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    parseTime,
    handleQueryTable() {
      this.$refs['tableRequestForm'].validate((valid) => {
        if (valid) {
          const tableRequestDto = {
            pageNum: this.tableRequest.pageNum,
            pageSize: this.tableRequest.pageSize,
            tableName: this.tableRequest.tableName,
            dbConnectionProperty: {
              url: this.tableRequest.url,
              username: this.tableRequest.username,
              password: this.tableRequest.password
            }
          }
          this.$store.dispatch('codeGenerator/setDbConnectionProperty', tableRequestDto.dbConnectionProperty)
          listTables(tableRequestDto).then((res) => {
            this.tables = res.data.list
            this.total = res.data.total
          })
        }
      })
    },
    showGeneratorConfig(row) {
      this.genConfig.tableName = row.tableName
      this.genConfigDialogVisible = true
    },
    handGenerateCode() {
      this.$refs['genConfigForm'].validate((valid) => {
        if (valid) {
          const genRequestDto = {
            dbConnectionProperty: {
              url: this.tableRequest.url,
              username: this.tableRequest.username,
              password: this.tableRequest.password
            },
            genConfig: {
              ...this.genConfig
            }
          }
          this.$store.dispatch('codeGenerator/setGenConfig', genRequestDto.genConfig)
          generatorCode(genRequestDto).then((data) => {
            downloadFile(data, this.genConfig.tableName, 'zip')
          })
        }
      })
    },
    handleSelectionChange(p) {
      console.log(p)
    },
    handleSizeChange(val) {
      this.tableRequest.pageSize = val
      this.handleQueryTable()
    },
    // pageNum改变时
    handleCurrentChange(val) {
      this.tableRequest.pageNum = val
      this.handleQueryTable()
    }
  }
}
</script>
<style scoped>
.select-box span:focus-within {
  border: none;
  outline: none;
}
</style>
